.header {
  @apply sticky left-0 right-0 z-10 p-12 top-[-2.5rem];

  @screen phone {
    & {
      @apply p-4 top-[0.5rem];
    }
  }
  & .header-blur {
    @apply absolute inset-0 left-0 bottom-[2.5rem];
    backdrop-filter: blur(5px);

    @screen phone {
      & {
        @apply top-[-2.5rem] left-[-1rem] bottom-0;
      }
    }
  }

  display: flex;
  justify-content: space-between;

  & .title {
    @apply flex items-center select-none relative z-10;

    font-size: 1.73rem;
  }
}

.main {
  @apply p-12;

  padding-top: 0;

  @screen phone {
    & {
      @apply p-4;
    }
  }
}

.buttons {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  display: flex;
  flex-direction: column;
  z-index: 30;
  button {
    @apply flex items-center justify-center;

    z-index: 3;
    box-sizing: border-box;
    width: 2.8em;
    height: 2.8em;
    color: #795548;
    margin-top: 0.5em;
    background: #fff;
    border-radius: 66%;
    transition: transform 0.3s;
    animation: show 0.5s both;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
    &:not(:first-child) {
      margin-top: 0.8rem;
    }
  }
}

.header-actions {
  @apply right-0 mr-12 phone:mr-0 top-0 bottom-0 flex items-center relative;

  & > button,
  & > a {
    @apply h-12 w-12 flex items-center justify-center shadow-2xl;
  }

  a > button {
    @apply h-full w-full;
  }
}
